<template>
  <div class="">
    <h4>readOnly和shallowReadOnly</h4>
    <h5>sum1为:{{ sum1 }}</h5>
    <h5>sum2为:{{ sum2 }}</h5>
    <button @click="sum1++">sum1+1</button>
    <button @click="sum2++">sum2+1</button>
    <hr>
    <h4>toRaw和markRow</h4>
    <h5>{{ person.name }}</h5>
    <h5>{{ person.age }}</h5>
    <button @click="ori_person.name += '~'">改人名</button>
    <h5>{{ person }}</h5>
    <h5>{{ ori_person }}</h5>
  </div>
</template>

<script setup lang="ts" name="Only">
import { reactive, readonly, ref, shallowReadonly, toRaw } from "vue"
import mockjs from "mockjs"
let sum1 = ref(0)
//维护住了二者的关联关系，其实sum2并没有被创建，只是对sum1的只读代理
let sum2 = readonly(sum1)
// 只限制第一层的只读，可以改里面的属性
let car1 = reactive({
  a: 1,
  b: 2,
})
let car2 = shallowReadonly(car1)

let person = reactive({
  name: '张三',
  age: 18,
})
// 获取原始数据
let ori_person = toRaw(person)

</script>

<style scoped></style>